<template>
  <div class="wrapper">
    <a-steps
      class="step-gp"
      :current="3"
      size="small"
      direction="vertical"
      @change="onChange"
    >
      <!-- a-step.step[title='test$']*20 -->

      <a-step
        v-for="c in cmds"
        class="step"
        :key="c._id"
        :status="c.hasError ? 'error' : 'finish'"
      >
        <template #title>
          <a-tag color="green">
            <template #icon>
              <a-popconfirm
                title="确定删除这个操作？可能导致现有的后续操作产生异常"
                ok-text="是"
                cancel-text="我再想想"
                @confirm="onCloseTag(c._id)"
              >
                <a href="#" style="color: red"><DeleteOutlined /></a>
              </a-popconfirm>
            </template>

            <a-popover trigger="click" placement="right">
              <span>{{ c.name }}</span>

              <template #content>
                <a-descriptions
                  style="width: 50vw"
                  title="调用信息"
                  :column="1"
                >
                  <a-descriptions-item label="code">
                    <code>
                      <pre>{{ c.code }}</pre>
                    </code>
                  </a-descriptions-item>
                </a-descriptions>
              </template>
            </a-popover>
          </a-tag>
        </template>
      </a-step>

      <!-- <a-step class="step" title="test4" status='error'></a-step> -->
    </a-steps>
  </div>
</template>

<script lang='ts'>
import CommandStore from "@/store/CommandStore";
import { computed, defineComponent, ref } from "vue";
import { CloseOutlined, DeleteOutlined } from "@ant-design/icons-vue";
import * as apps from "@/applications";

export default defineComponent({
  name: "Commander",
  components: { CloseOutlined, DeleteOutlined },

  setup() {
    let cmds = CommandStore.getStateToRefs().cmds;
    let cmd_modal = ref(null);

    let status = computed(() => {});

    let onCloseTag = async (id: string) => {
      await apps.removeCmd(id);
    };

    return { cmds, onCloseTag, cmd_modal };
  },
});
</script>


<style lang="less" scoped>
.step-gp {
  // width: 100%;

  // margin-top: 20px;
}

.ant-tag-close-icon {
  display: inline;
}

code {
  overflow: auto;
}
</style>